<template>
  <div
    id="banner"
    :style="{
      backgroundImage: 'url(' + src + ')',
      background: 'no-repeat',
      backgroundSize: '10000px',
      backgroundPosition: 'center center',
    }"
  >
    <div class="left">
      <img src="../../../assets/left.png" @click="gotoPage(prevIndex)" alt="" />
    </div>

    <div class="banner">
      <ul class="circle">
        <li
          v-for="(item, index) in bannerList"
          :key="index + '-only'"
          @click="gotoPage(index)"
          :style="{ color: currentIndex == index ? 'rgb(255,101,0)' : '' }"
        >
          {{ index + 1 }}
        </li>
      </ul>
      <ul>
        <li class="img">
          <img :src="src" alt="" />
        </li>
      </ul>
    </div>
    <div class="right">
      <img
        src="../../../assets/right.png"
        alt=""
        @click="gotoPage(nextIndex)"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片地址
      src: "",
      bannerList: [],
      length: 0,
      currentIndex: 0, // 默认显示图片
      timer: null, // 定时器
    };
  },
  computed: {
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    nextIndex() {
      if (this.currentIndex == this.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
  },
  methods: {
    // 切换
    gotoPage(index) {
      // 点击时设置currentIndex为当前的下标值
      this.currentIndex = index;
      this.src = this.bannerList[this.currentIndex];
    },
  },
  //   created() {
  //     this.$axios
  //       .get("/banner?type=" + 0)
  //       .then((result) => {
  //         console.log(result);
  //         this.bannerList = [];
  //         result.data.banners.forEach((element) => {
  //           this.bannerList.push(element.imageUrl);
  //         });
  //         console.log(this.bannerList);
  //         this.length = this.bannerList.length;
  //         this.src = this.bannerList[this.currentIndex];
  //         console.log(this.src);
  //       })
  //       .catch((err) => {});
  //     this.$nextTick(() => {
  //       this.timer = setInterval(() => {
  //         this.gotoPage(this.nextIndex);
  //       }, 3000);
  //     });
  //   },
};
</script>

<style scoped>
#banner {
  height: 343px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner {
  width: 78%;
  position: relative;
}

.banner ul {
  padding: 0 30px;
}

.img img {
  width: 100%;
}

.circle {
  position: absolute;
  bottom: 10px;
  width: 300px;
  left: 50%;
  margin-left: -150px;
}

.circle li {
  height: 30px;
  height: 30px;
  padding-right: 20px;
  float: left;
  text-align: center;
  color: #e6e6e6;
  cursor: pointer;
}

.current {
  color: rgb(255, 101, 0);
}

.left img,
.right img {
  width: 30px;
  height: 30px;
}
</style>